import ArticleInfo from '@/components/ArticleInfo';
import ArticleItem from '@/components/ArticleItem';
import { CommentOutlined, DoubleRightOutlined, FileTextOutlined } from '@ant-design/icons';
import { Avatar, List } from 'antd';
import classNames from 'classnames';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';

interface CommentType {
  gender: string;
  name: {
    title: string;
    first: string;
    last: string;
  };
  email: string;
  picture: {
    large: string;
    medium: string;
    thumbnail: string;
  };
  nat: string;
}
const Index: React.FC = () => {
  const showRef = useRef<HTMLDivElement>(null);
  const [activateIndex, setActivateIndex] = useState<string>('all');
  const [labelIsOverflow, setLabelIsOverflow] = useState<boolean>(false);
  const [isUnfold, setUnfold] = useState<boolean>(false);
  const [newCommentDataList] = useState<CommentType[]>([
    {
      gender: '女',
      name: {
        title: '我是标题',
        first: 'first',
        last: 'last',
      },
      email: 'email',
      picture: {
        large: 'large',
        medium: 'medium',
        thumbnail: 'thumbnail',
      },
      nat: 'nat',
    },
    {
      gender: '女',
      name: {
        title: '我是标题',
        first: 'first',
        last: 'last',
      },
      email: 'email',
      picture: {
        large: 'large',
        medium: 'medium',
        thumbnail: 'thumbnail',
      },
      nat: 'nat',
    },
    {
      gender: '女',
      name: {
        title: '我是标题',
        first: 'first',
        last: 'last',
      },
      email: 'email',
      picture: {
        large: 'large',
        medium: 'medium',
        thumbnail: 'thumbnail',
      },
      nat: 'nat',
    },
    {
      gender: '女',
      name: {
        title: '我是标题',
        first: 'first',
        last: 'last',
      },
      email: 'email',
      picture: {
        large: 'large',
        medium: 'medium',
        thumbnail: 'thumbnail',
      },
      nat: 'nat',
    },
    {
      gender: '女',
      name: {
        title: '我是标题',
        first: 'first',
        last: 'last',
      },
      email: 'email',
      picture: {
        large: 'large',
        medium: 'medium',
        thumbnail: 'thumbnail',
      },
      nat: 'nat',
    },
    {
      gender: '女',
      name: {
        title: '我是标题',
        first: 'first',
        last: 'last',
      },
      email: 'email',
      picture: {
        large: 'large',
        medium: 'medium',
        thumbnail: 'thumbnail',
      },
      nat: 'nat',
    },
  ]);
  useEffect(() => {
    if (showRef && showRef.current && showRef.current.scrollHeight > showRef.current.clientHeight) {
      // 文本超出了
      setLabelIsOverflow(true);
      setUnfold(false);
    } else {
      setLabelIsOverflow(false);
    }
  }, []);
  return (
    <div className={styles.personalHomepage}>
      <div className={styles.banner}>
        <ArticleItem
          listData={[
            { user: { headPortrait: '1111', nickname: '张三' }, articleId: 1 },
            { user: { headPortrait: '1111', nickname: '张三' }, articleId: 1 },
          ]}
        />
      </div>
      <div className={styles.featuredFirst}>
        <div className={styles.featuredFirstLeftWrapper}>
          <div className={styles.featuredFirstLeft}>
            <div className={styles.signature}>EDITOR&apos;S SELECTION</div>
            <div className={styles.featuredFirstText}>推荐文章</div>
          </div>
        </div>
        <ArticleItem
          listData={[{ user: { headPortrait: '1111', nickname: '张三' }, articleId: 1 }]}
        />
      </div>
      <div className={styles.rowTitle}>
        <FileTextOutlined className={styles.titleIcon} />
        <div className={styles.title}>文章列表</div>
        <div className={styles.bottomLine} />
      </div>
      <div className={styles.articleListWrapper}>
        <div className={styles.articleListLeft}>
          <div className={classNames(styles.labelListWrapper)} ref={showRef}>
            <div
              className={classNames(
                styles.labelList,
                isUnfold ? styles.articleLabelList : null,
                labelIsOverflow ? styles.articleLabelListScrollBar : null,
              )}
            >
              <div
                className={classNames(
                  styles.lableItem,
                  activateIndex === 'all' ? styles.activateArticleItem : null,
                )}
              >
                <div className={styles.labelText}>全部</div>
              </div>
              {[
                { name: 'JAVA', number: 10 },
                { name: 'Docker', number: 10 },
                { name: 'HTMl', number: 10 },
                { name: 'JavaScript', number: 10 },
                { name: 'Css', number: 10 },
                { name: 'C++', number: 10 },
                { name: 'C', number: 10 },
                { name: 'mysql', number: 10 },
                { name: '小说网', number: 10 },
                { name: '日记', number: 10 },
              ].map((item) => {
                return (
                  <div
                    key={item.name}
                    onClick={() => setActivateIndex(item.name)}
                    className={classNames(
                      styles.lableItem,
                      activateIndex === item.name ? styles.activateArticleItem : null,
                    )}
                  >
                    <div className={styles.labelText}>{item.name}</div>
                    <div className={styles.articleNumber}>{item.number}</div>
                  </div>
                );
              })}
            </div>
            <div
              className={classNames(
                styles.moreLable,
                labelIsOverflow ? null : styles.moreLableHidden,
              )}
            >
              <DoubleRightOutlined
                style={{ transform: isUnfold ? 'rotate(90deg)' : 'rotate(-90deg)' }}
                onClick={() => setUnfold(!isUnfold)}
                className={styles.moreIcon}
              />
            </div>
          </div>
          <ArticleItem
            listData={[{ user: { headPortrait: '1111', nickname: '张三' }, articleId: 1 }]}
          />
        </div>
        <div className={styles.articleListRight}>
          <ArticleInfo />
          <div className={classNames(styles.rightRow)}>
            <div className={styles.rowTitle}>
              <CommentOutlined className={styles.titleIcon} />
              <div className={styles.title}>最新评论</div>
              <div className={styles.bottomLine} />
            </div>
            <div className={styles.commentList}>
              <List
                dataSource={newCommentDataList}
                renderItem={(item) => (
                  <List.Item key={item.email} className={styles.listItem}>
                    <List.Item.Meta
                      avatar={<Avatar src={item.picture.large} />}
                      title={
                        <a href="https://ant.design">{item.name.last}&nbsp;&nbsp;2023-03-13</a>
                      }
                      description={item.email}
                    />
                  </List.Item>
                )}
              />
            </div>
          </div>
          <div className={classNames(styles.rightRow)}>
            <div className={styles.rowTitle}>
              <CommentOutlined className={styles.titleIcon} />
              <div className={styles.title}>NOTICE</div>
              <div className={styles.bottomLine} />
            </div>
            <div className={styles.briefIntroduction}>
              测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
